<template>
  <div class="departments-container">
    <el-card class="mycard">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="组织结构" name="first">
          <!-- 内容结构 -->
          <div class="content">
            <!-- 头部 -->
            <!-- <el-row class="myborder">
              <el-col :span="18" class="left">
                <i class="el-icon-s-home"></i>
                <span>江苏传智</span>
              </el-col>
              <el-col :span="6" class="right">
                <span>负责人</span>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row> -->
             <treetools class="myborder" :item="headData" ></treetools>
            <!-- 内容 -->
            <el-tree
              class="mytree"
              :data="data"
              default-expand-all
              style="width: 100%"
            >
             <treetools slot-scope="{ data }" :item="data" ></treetools>
            </el-tree>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> -->
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      data: [
        {
          label: "北京",
          children: [
            {
              label: "潮阳",
              children: [
                {
                  label: "潮阳群众1",
                },
                {
                  label: "潮阳群众2",
                },
              ],
            },
            {
              label: "顺义",
              children: [
                {
                  label: "顺义群众1",
                },
                {
                  label: "顺义群众2",
                },
              ],
            },
          ],
        },
        {
          label: "深圳",
          children: [
            {
              label: "宝安",
              children: [
                {
                  label: "宝安群众1",
                },
                {
                  label: "宝安群众2",
                },
              ],
            },
            {
              label: "南山",
              children: [
                {
                  label: "南山群众1",
                },
                {
                  label: "南山群众2",
                },
              ],
            },
          ],
        },
      ],
      headData:{
        label:'江苏传智播客',
        isTop:true
      }
    };
  },
  methods: {
    // fn(data) {
    //   console.log(data);
    // },

    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  components:{
    treetools:()=>import('./components/tree-tools.vue')
  }
};
</script>

<style lang='scss'>
.departments-container {
  margin: 20px;
  .mycard {
    padding: 40px;
    .content {

      padding: 30px 60px;
      .myborder {
        border-bottom: 1px solid #ccc;
        line-height: 50px;
        .left {
          font-weight: 700;
          i {
            margin-right: 8px;
          }
        }
        .right {       
          text-align: right;
          span {
            margin-right: 20px;
          }
          .el-dropdown-link {
            font-size: 16px;
          }
        }
        .mytree {
          margin-top: 10px;
       
        }
        
      }
    }
  }
}
</style>
